<!--
 * @Author: byron
 * @Date: 2021-09-26 23:23:39
 * @LastEditTime: 2021-09-28 02:10:04
-->
<template>
    <div class="theme">
        <el-popover placement="bottom" width="200" trigger="click">
            <div class="theme-con">
                <div
                    class="theme-item"
                    v-for="(item, index) in themeMap"
                    :key="index"
                    @click="chageTheme(item.file)"
                >
                    <div class="theme-item-son" :style="item.style"></div>
                    <p>{{ item.title }}</p>
                </div>
            </div>
            <Icon type="pifu1" :backdrop="true" slot="reference" :size="20" />
        </el-popover>
    </div>
</template>

<script>
import ThemeDefault from '@/style/themes/theme-default.js'
import ThemeBlack from '@/style/themes/theme-black.js'
import ThemeWhite from '@/style/themes/theme-white.js'

const themes = { white: 'white', black: 'black', pink: 'pink' }

export default {
    components: {},
    props: {},
    data() {
        return {
            themeMap: {},
        }
    },
    watch: {},
    computed: {},
    methods: {
        chageTheme(colorObj) {
            this.$loadTheme(colorObj)
            console.log(colorObj)
        },
    },
    created() {
        this.themeMap = {
            [themes.white]: {
                title: '浅色',
                file: ThemeWhite,
                style: {
                    backgroundColor: '#F6F6F6',
                    border: '1px solid #EBEAEA',
                },
            },

            [themes.black]: {
                title: '深色',
                file: ThemeBlack,
                style: {
                    backgroundColor: '#252525',
                    border: '1px solid #EBEAEA',
                },
            },
            [themes.pink]: {
                title: '白色',
                file: ThemeDefault,
                style: {
                    backgroundColor: '#fff',
                    border: '1px solid #EBEAEA',
                },
            },
        }
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.theme-con {
    display: flex;
    align-items: center;
    justify-content: center;
    .theme-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        margin: 0px 4px;
        .theme-item-son {
            align-self: center;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-bottom: 4px;
        }
    }
}
</style>
